<template>
  <commonDialog
    :model-value="modelValue"
    :title="title" @sure="save" @close="cancel">
    <el-form ref="formRef" :model="request" :label-width="80">
      <el-form-item label="公告标题">
        <el-input placeholder="请输入公告标题" :disabled="type===2" v-model="request.title"></el-input>
      </el-form-item>
      <el-form-item label="公告内容">
        <markdown v-model="request.content" :previewOnly="edit.previewOnly"></markdown>
      </el-form-item>
    </el-form>
  </commonDialog>
</template>

<script>
import { onBeforeMount, ref, toRefs, reactive } from 'vue'
import { addNoticeUrl, queryNoticeById } from '@/api/api'
import { post } from '@/utils/httpRequest'
import { propsConst } from '@/utils/propsConstant'

export default {
  name: 'noticeInfo',
  setup (props, { emit }) {
    // 编辑器配置
    const edit = reactive({
      previewOnly: false
    })
    const {
      type,
      id
    } = toRefs(props)
    const request = ref({
      content: '',
      title: ''
    })
    const cancel = () => {
      emit('update:modelValue', false)
    }
    const addNoticeAsync = async () => {
      const result = await post(addNoticeUrl, request.value)
      if (result.code === 200) {
        emit('save')
        cancel()
      }
    }
    const save = () => {
      addNoticeAsync()
    }
    const queryNoticeByIdAsync = async () => {
      const result = await post(queryNoticeById, { id: id.value })
      if (result.code === 200) {
        request.value = result.data
      }
    }
    onBeforeMount(() => {
      switch (type.value) {
        case 0:
          break
        case 2:
          queryNoticeByIdAsync()
          edit.previewOnly = true
          break
      }
    })
    return {
      edit,
      request,
      cancel,
      save
    }
  },
  props: propsConst
}
</script>

<style scoped>

</style>
